<template>
	<view>
		<van-search
		  @focus="goSearchPage"
		  shape="round"
		  background="#f2f2f2"
		  placeholder="请输入搜索关键词"
		/>
		<swiper previous-margin="60rpx" next-margin="60rpx" class="swiper" circular :autoplay="true"
			:indicator-dots="true">
			<swiper-item v-for="(item,sidx) in swipers">
				<image :src="item.src"></image>
			</swiper-item>
		</swiper>
		<van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />

		<view class="cates">
			<view v-for="(cate,cidx) in cates" class="cate">
				<image :src="cate.src" mode="aspectFill"></image>
				<view class="name">{{cate.name}}</view>
			</view>
		</view>
		<view class="adver">
			<view v-for="(adv,cidx) in advers" class="adv">
				<image :src="adv.src"></image>
			</view>
		</view>
		<van-divider>商品</van-divider>
		<van-dropdown-menu>
			<van-dropdown-item v-model="value1" :options="option1" />
			<van-dropdown-item v-model="value2" :options="option2" />
		</van-dropdown-menu>
		<van-card
		  num="2"
		  price="2.00"
		  desc="描述信息"
		  title="商品标题"
		  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
		/>
		<van-card
		  num="2"
		  price="2.00"
		  desc="描述信息"
		  title="商品标题"
		  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
		/>
		<van-card
		  num="2"
		  price="2.00"
		  desc="描述信息"
		  title="商品标题"
		  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
		/>
	</view>
</template>

<script>
	const db = uniCloud.database()
	import cateData from '@/json/cate.json'
	import adverData from '@/json/adver.json'
	import Msg from '@/utils/msg.js'
	import { ref } from 'vue';
	export default {
		setup() {
			const value1 = ref(0);
			const value2 = ref('a');
			const option1 = [{
					text: '全部商品',
					value: 0
				},
				{
					text: '新款商品',
					value: 1
				},
				{
					text: '活动商品',
					value: 2
				},
			];
			const option2 = [{
					text: '默认排序',
					value: 'a'
				},
				{
					text: '好评排序',
					value: 'b'
				},
				{
					text: '销量排序',
					value: 'c'
				},
			];
			return {
				value1,
				value2,
				option1,
				option2,
			};
		},
		data() {
			return {
				swipers: [],
				cates: [],
				advers: []
			}
		},
		onLoad() {
			this.cates = cateData
			this.advers = adverData
			this.getSwiper()
		},
		methods: {
			getSwiper() {
				db.collection("swiper").get().then((res) => {
					if (res.result.errCode == 0) {
						this.swipers = res.result.data;
					}
				}).catch((e) => {
					console.log(e)
				});
			},
			goSearchPage(){
				uni.navigateTo({
					url:"/pages/goods/search"
				})
			}
		}
	}
</script>

<style scoped>
	.swiper {
		height: 340rpx;
	}

	swiper-item {
		width: calc(100%-120rpx);
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	swiper-item image {
		width: 94%;
		height: 90%;
		border-radius: 10rpx;
	}

	.cates {
		display: flex;
		width: 700rpx;
		padding: 25rpx;
		justify-content: space-between;
	}

	.cates .cate {
		width: 100rpx;
		height: 140rpx;
	}

	.cates .cate image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	.cates .cate .name {
		height: 40rpx;
		font-size: 30rpx;
		text-align: center;
		color: #444444;
	}

	.adver {
		width: 700rpx;
		height: 350rpx;
		padding: 0 25rpx;
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: 50% 50%;
	}

	.adv {
		margin: 6rpx;
		border-radius: 6rpx;
		overflow: hidden;
	}

	.adv:nth-child(1) {
		grid-row: 1/span 2;
	}

	.adv image {
		width: 100%;
		height: 100%;
	}
</style>
